<template>
  <tm-app ref="app">
    <view class="index-page px-n10">
      <tm-alert :showClose="false">
        <tm-text>{{ $trans('pages.sellCard.alertContent') }}</tm-text>
      </tm-alert>
      <!--  -->
      <view class="card-select">
        <tm-text class="mb-20 text-#333">{{ $trans('pages.sellCard.cardSelect') }} </tm-text>
        <tm-row
          :column="3"
          class="pa-n5 round-5 flex-row-center-between picker-container"
          @click="cardSelectedDrawerShow = true"
        >
          <tm-col :span="2">
            <tm-row class="flex-start">
              <tm-image :round="100" :width="80" :height="80" :src="selectCardItem.icon"></tm-image>
              <tm-text class="ml-n5">{{ selectCardItem.name }}</tm-text>
            </tm-row>
          </tm-col>
          <tm-col :span="1" class="text-align-right">
            <tm-icon class="text-size-xxs" name="arrow-down-s-line"></tm-icon>
          </tm-col>
        </tm-row>
      </view>
      <!--  -->
      <tm-row class="flex-end">
        <tm-text class="py-n5 mr-n5 text-align-right" style="color: #ff7a28">{{
          $trans('pages.sellCard.onlyPhysicalcardsAccepted')
        }}</tm-text>
        <tm-icon name="error-warning-line" color="#ff7a28"></tm-icon>
      </tm-row>
      <!--  -->
      <view class="card-select mb-20">
        <tm-text color="#333" class="mb-20"
          >{{ $trans('pages.sellCard.currencySelected') }}
        </tm-text>
        <tm-row
          :column="3"
          class="pa-n5 round-5 flex-row-center-between picker-container"
          @click="currencySelectedDrawerShow = true"
        >
          <tm-col :span="2">
            <tm-row class="flex-start">
              <tm-image
                :round="100"
                :width="80"
                :height="80"
                :src="selectCurrencyItem.icon"
              ></tm-image>
              <tm-text class="ml-n5">{{ selectCurrencyItem.name }}</tm-text>
            </tm-row>
          </tm-col>
          <tm-col :span="1" class="text-align-right">
            <tm-icon class="text-size-xxs" name="arrow-down-s-line"></tm-icon>
          </tm-col>
        </tm-row>
      </view>
      <!--  -->
      <view class="card-select mb-20">
        <tm-text color="#333" class="mb-20">{{ $trans('pages.sellCard.youSell') }} </tm-text>
        <tm-row :column="3" class="pa-n5 round-5 flex-row-center-between picker-container">
          <tm-col :span="2">
            <tm-input
              v-model="youSellAmount"
              fontSize="28"
              :placeholder="$trans('pages.sellCard.enterTradeAmount')"
              :focusHighlight="false"
              color="transparent"
            ></tm-input>
          </tm-col>
          <tm-col class="text-align-right">
            <tm-text>USD</tm-text>
          </tm-col>
        </tm-row>
      </view>
      <!--  -->
      <tm-text class="mb-20">{{ $trans('pages.sellCard.giftCardDetails') }}</tm-text>
      <tm-sheet shadow="50" margin="0">
        <tm-row class="border-b-1 pb-n5">
          <tm-text color="red" class="mr-5">*</tm-text>
          <tm-text>{{ $trans('pages.sellCard.enterGiftCardCode') }}</tm-text>
        </tm-row>
        <tm-input
          v-model="giftCardCode"
          :maxlength="150"
          height="150"
          fontSize="26"
          :placeholder="$trans('pages.sellCard.enterGiftCardCodePlaceholder')"
          type="textarea"
          color="transparent"
          :focusHighlight="false"
          inputPadding="0"
        />
      </tm-sheet>
      <!--  -->
      <tm-sheet shadow="50" :margin="[0, 20, 0, 0]">
        <tm-row class="border-b-1 pb-n5 mb-n5">
          <tm-text color="red" class="mr-5">*</tm-text>
          <tm-text>{{ $trans('pages.sellCard.uploadGiftCardImages') }}</tm-text>
        </tm-row>
        <tm-upload-photo v-model="photoList"></tm-upload-photo>
        <!-- <tm-row>
          <view class="upload-btn"></view>
        </tm-row> -->
      </tm-sheet>
    </view>
    <!--  -->
    <view class="flex-start shadow-25 page-bottom-navbar">
      <tm-button skin="dashed" :round="60" class="flex-1 mr-n5" @click="onLiveChat">
        <tm-text color="primary" fontSize="30">{{
          $trans('pages.sellCard.bottomNavbar.liveChat')
        }}</tm-text>
      </tm-button>
      <tm-button block :round="60" class="flex-1">
        <tm-text color="#fff" fontSize="30">{{
          $trans('pages.sellCard.bottomNavbar.sell')
        }}</tm-text>
      </tm-button>
    </view>
    <!--  -->
    <CardDrawer v-model:show="cardSelectedDrawerShow" @choose="(item) => (selectCardItem = item)" />
    <CurrencyDrawer
      v-model:show="currencySelectedDrawerShow"
      @choose="(item) => (selectCurrencyItem = item)"
    />
  </tm-app>
</template>
<script lang="ts" setup>
  import { CARD_RESOURCES, CURRENCY_RESOURCES } from './MOCK';
  import CardDrawer from '@/components/CardBrandDrawer/index.vue';
  import CurrencyDrawer from '@/components/CurrencyDrawer/index.vue';

  const content = ref([
    {
      icon: 'tmicon-alert',
      content: '这是一条新闻这是一条新闻22这是一条新闻这是一条新闻这是一条新闻',
    },
  ]);
  const youSellAmount = ref('');
  const giftCardCode = ref('');
  const photoList = ref([]);

  const selectCardItem = ref({});
  const selectCurrencyItem = ref({});
  // drawer
  const cardSelectedDrawerShow = ref(false);
  const currencySelectedDrawerShow = ref(false);

  const onLiveChat = () => {
    uni.navigateTo({
      url: '/pages/liveChat/index',
    });
  };

  onMounted(() => {
    selectCardItem.value = CARD_RESOURCES[0];
    selectCurrencyItem.value = CURRENCY_RESOURCES[0];
  });
</script>
<style lang="scss" scoped>
  page {
    background-color: #fff;
  }

  $bottomNavbarHeight: 70px;

  .index-page {
    padding-bottom: calc($bottomNavbarHeight + 20px);
    .card-select {
      .picker-container {
        background: #f5f6fa;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        border: 1px solid #f5f6fa;
      }
    }
  }
  .page-bottom-navbar {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 20px;
    width: calc(100% - 40px);
    height: $bottomNavbarHeight;
    background-color: #fff;
  }

  .custom-drawer-container {
    height: 750rpx;
  }

  .tmDrawerTitleBox {
    padding: 20px;
    height: initial;
    .tmInput {
      flex: 1;
    }
  }
</style>
